<template>
  <div class="article-page">
    <header>
      <ul class="left">
        <li :class="{active: active === 'recom'}" @click="active = 'recom'">推荐</li>
        <li :class="{active: active === 'news'}" @click="active = 'news'">最新</li>
      </ul>
      <van-image class="logo" :src="logo" />
    </header>
    <div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ul v-show="active === 'recom'" class="item-list">
          <ArticleItem v-for="item in ArticleListRecom" :key="item.id" :article="item" />
        </ul>
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
      </van-list>

      <!-- <ul v-show="active === 'news'"> -->
      <ArticleNews :active="active" />
      <!-- </ul> -->
    </div>
  </div>
</template>

<script>
import logo from './img/logo.png'
import ArticleItem from './components/article.vue'
import { getArticleList } from '@/api/article.js'
import ArticleNews from './components/new.vue'
export default {
  name: 'article-page',
  props: {},
  components: {
    ArticleItem,
    ArticleNews
  },
  data () {
    return {
      logo,
      // active: 'recom || news'
      active: 'recom',
      ArticleListRecom: [],
      pageSize: 10,
      current: 1,
      list: [],
      loading: false,
      finished: false
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getArticleList()
  },
  methods: {
    async getArticleList () {
      const { data } = await getArticleList({
        sorter: 'weight_desc',
        pageSize: this.pageSize, // 当前页面数据
        current: this.current
      })
      console.log(data)
      this.ArticleListRecom = data.data.rows
      console.log(this.ArticleListRecom)
    },
    onLoad () {
      console.log(222)
    }
  }
}
</script>

<style lang="less" scoped>
.article-page {
  padding-top: 44px;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  height: 44px;
  width: 100%;
  background: skyblue;
  padding: 0 10px;
  z-index: 9;

  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    li {
      position: relative;
      line-height: 44px;
      padding: 0 10px;
      color: #888;
      &::after {
        // 过渡：1. 谁做动画给谁加； 2. 什么效果动画设置谁；
        transition: width 0.5s;
        content: ""; // 千万别忘了
        width: 0;
        height: 2px;
        background: #222;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
      }
      &.active {
        color: #333;
        &::after {
          width: 14px;
        }
      }
    }
  }
  .logo {
    width: 64px;
  }
}

// 文章列表样式
.item-list {
  .top {
    display: flex;
    align-items: center;
    line-height: 1.4;
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
    .line-2 {
      color: #999;
      font-size: 12px;
    }
  }
  .bottom {
    color: #666;
    // padding: 10px 0;
    margin: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>
